Component({
  properties: {
    bgcolor: {
      type: String,
      value: ""
    },
    selector: {
      type: String,
      value: "skeleton"
    },
    loading: {
      type: String,
      value: "chiaroscuro"
    }
  },
  data: {
    loadingAni: ["spin", "chiaroscuro"],
    systemInfo: {},
    skeletonRectLists: [],
    skeletonCircleLists: []
  },

  attached() {
    //默认的首屏宽高，防止内容闪现
    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      systemInfo: {
        width: systemInfo.windowWidth,
        height: systemInfo.windowHeight
      },
      loading: this.data.loadingAni.includes(this.data.loading)
        ? this.data.loading
        : "spin"
    });
  },

  ready() {
    const that = this;

    //绘制背景
    wx.createSelectorQuery()
      .selectAll(`.${this.data.selector}`)
      .boundingClientRect()
      .exec(res => {
        that.setData({
          "systemInfo.height": res[0][0].height + res[0][0].top
        });
      });

    //绘制矩形
    this.rectHandle();

    //绘制圆形
    this.radiusHandle();
  },

  methods: {
    rectHandle() {
      const that = this;

      //绘制不带样式的节点
      wx.createSelectorQuery()
        .selectAll(`.${this.data.selector} >>> .${this.data.selector}-rect`)
        .boundingClientRect()
        .exec(function(res) {
          that.setData({
            skeletonRectLists: res[0]
          });
          // console.log(that.data);
        });
    },
    radiusHandle() {
      const that = this;

      wx.createSelectorQuery()
        .selectAll(`.${this.data.selector} >>> .${this.data.selector}-radius`)
        .boundingClientRect()
        .exec(res => {
          // console.log(res);
          that.setData({
            skeletonCircleLists: res[0]
          });

          // console.log(that.data);
        });
    }
  }
});
